<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen"
	href="/i-webmonitor/application/resources/css/ui-lightness/jquery-ui-1.8.23.custom.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="/i-webmonitor/application/resources/css/ui.jqgrid.css" />

<style>
html,body {
	margin: 0;
	padding: 0;
	font-size: 75%;
}

.horizontal {
	float: left;
	list-style: none;
	margin: 10px;
}

.highlight {
	background-color: yellow;
}

.large {
	background-color: red;
}

.hover {
	cursor: pointer;
}

#draggable {
	width: 150px;
	height: 150px;
	padding: 0.5em;
}

/* body, a:active and : focus only needed for demo; these
can be removed for production use */
body {
	padding: 50px 80px;
}

a:active {
	outline: none;
}

:focus {
	-moz-outline-style: none;
}

.apple_overlay { /* initially overlay is hidden */
	display: none;
	/* growing background image */
	background-image: url(white.png);
	/* width after animation - height is auto-calculated */
	width: 675px;
	/* some padding to layout nested elements nicely */
	padding: 25px;
	margin: 20px;
}

/* default close button positioned on upper right corner */
.apple_overlay .close {
	background-image: url(close.png);
	position: absolute;
	right: -10px;
	top: -10px;
	cursor: pointer;
	height: 35px;
	width: 35px;
}

#overlay {
	height: 526px;
	width: 675px;
}

div.contentWrap {
	height: 526px;
	width: 675px;
	overflow: hidden;
}

a,body {
	font-family: Arial, Tahoma, Times New Roman;
}

body.no-js a[rel] {
	/* initially overlay is hidden if JavaScript is disabled */
	display: none;
}

body.js .apple_overlay {
	/* initially overlay is hidden if JavaScript is enabled */
	display: none;
}
</style>

<script src="/i-webmonitor/application/resources/js/jquery-1.8.0.min.js"
	type="text/javascript"></script>
<script
	src="/i-webmonitor/application/resources/js/jquery-ui-1.8.23.custom.min.js"
	type="text/javascript"></script>
<script
	src="/i-webmonitor/application/resources/js/i18n/grid.locale-en.js"
	type="text/javascript"></script>
<script
	src="/i-webmonitor/application/resources/js/jquery.jqGrid.min.js"
	type="text/javascript"></script>
<script type="text/javascript">



</script>
</head>
<body class="no-js">
<!-- 
<div class="demo">

<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>

</div>
 -->
<!-- End demo -->
<!-- trigger elements -->
<a href="#link1" rel="#link1">Location of Packt's Office</a>
<!-- overlayed element -->
<div class="apple_overlay" id="link1"><iframe width="675" height="480"
	frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
	src="http://maps.google.co.uk/maps?q=B3+2PB&amp;hl=en&amp;
sll=52.483277,-1.900152&amp;sspn=0.003679,0.009645&amp;vpsrc=0&amp;
t=m&amp;ie=UTF8&amp;hq=&amp;hnear=Birmingham,+West+Midlands+B3+2PB,
+United+Kingdom&amp;ll=52.484296,-1.90115&amp;
spn=0.015681,0.025749&amp;z=14&amp;iwloc=A&amp;output=embed"> </iframe>
<p>Packt's office in Birmingham</p>
</div>
<script>
$(function() {
$("a[rel][href!='']").overlay({
// some mask tweaks suitable for modal dialogs
mask: {
color: '#000',
loadSpeed: 200,
opacity: 0.8
},effect: 'apple',
onBeforeLoad: function() {
	var overlaid = this, overEl = this.getOverlay();
	// grab wrapper element inside content
	overEl.find(".contentWrap").load(
	this.getTrigger().attr("href"));
	overEl.appendTo("body");
	$(".close", this.getOverlay()).click(function(e){
	overlaid.close();
	});
	}
	});
	});
	</script>
</body>
</html>
